Ext.define('Xgj.ui.VerifyCodeField', {
			extend : 'Ext.form.field.Text',
			alias : 'widget.verifyfield',
			inputTyle : 'verifyfield',
			imgUrl : "VerifyCode",
			isLoader : true,
			onRender : function(ct, position) {
				this.callParent(arguments);
				this.imgEl = ct.createChild({
							tag : 'img',
							src : Ext.BLANK_IMAGE_URL
						});
				this.el.applyStyles({
							float : "left"
						});
				this.imgEl.applyStyles({
							width : 73,
							height : 20,
							verticalAlign : "middle",
							cursor : "pointer",
							float : "left",
							marginLeft : 7
						});
				this.imgEl.on('click', this.loadCodeImg, this);
				if (this.isLoader)
					this.loadCodeImg();
			},
			alignErrorIcon : function() {
				this.errorIcon.alignTo(this.imgEl, 'tl-tr', [2, 0]);
			},
			loadCodeImg : function() {
				this.imgEl.set({
							src : this.imgUrl + '?t=' + Math.random()
						});
			}
		});

Ext.onReady(function() {
	// form
	var formPanel = Ext.create('Ext.form.Panel', {
		id : "loginForm",
		layout : 'anchor',
		border : false,
		standardSubmit : true,
		defaults : {
			anchor : '100%'
		},
		bodyStyle : {
			background : "#D5E3F4"
		},
		items : [{
					xtype : 'component',
					autoEl : {
						tag : 'img',
						src : 'images/loginTitle.png'
					}
				}, {
					xtype : "tabpanel",
					height : 145,
					id : "tabpanel",
					defaults : {
						bodyStyle : 'padding:10px'
					},
					border : false,
					items : [{
						title : "用户登录",
						id : "loginTab",
						items : [{
							xtype : "textfield",
							fieldLabel : '用户名',
							name : 'username',
							id : "usernameId",
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										login();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "loginTab") {
									if (value.length < 4 || value.length > 12) {
										return "用户名的长度必须大于等于4，小于等于12";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}, {
							xtype : "textfield",
							fieldLabel : '密&nbsp;&nbsp;&nbsp;码',
							name : 'password',
							inputType : "password",
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										login();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "loginTab") {
									if (value.length < 4 || value.length > 12) {
										return "密码的长度必须大于等于4，小于等于12";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}, {
							xtype : "verifyfield",
							fieldLabel : '验证码',
							name : 'verifyCode',
							blankText : '验证码不能为空',
							width : 160,
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										login();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "loginTab") {
									if (value.length != 4) {
										return "验证码的长度必须等于4";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}]
					}, {
						title : "用户注册",
						id : "registerTab",
						items : [{
							xtype : "textfield",
							fieldLabel : '用户名',
							name : 're_username',
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										register();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "registerTab") {
									if (value.length < 4 || value.length > 12) {
										return "用户名的长度必须大于等于4，小于等于12";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}, {
							xtype : "textfield",
							fieldLabel : '密&nbsp;&nbsp;&nbsp;码',
							name : 're_password',
							inputType : "password",
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										register();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "registerTab") {
									if (value.length < 4 || value.length > 12) {
										return "密码的长度必须大于等于4，小于等于12";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}, {
							xtype : "textfield",
							fieldLabel : '确认密码',
							name : 're_repassword',
							inputType : "password",
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										register();
									}
								}
							},
							validator : function() {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "registerTab") {
									var re_password = jq("input[name='re_password']")
											.val();
									var re_repassword = jq("input[name='re_repassword']")
											.val();
									if (re_password != re_repassword) {
										return "两次密码不相等";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}
						}, {
							xtype : "verifyfield",
							fieldLabel : '验证码',
							name : 're_verifyCode',
							width : 160,
							listeners : {
								specialkey : function(field, e) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										register();
									}
								}
							},
							validator : function(value) {
								var tabId = Ext.getCmp("tabpanel")
										.getActiveTab().getId();
								if (tabId == "registerTab") {
									if (value.length != 4) {
										return "验证码的长度必须等于4";
									} else {
										return true;
									}
								} else {
									return true;
								}
							}

						}]
					}]
				}]
	});

	// window
	var win = new Ext.Window({
				title : "这就是一个标题",
				renderTo : Ext.getBody(),
				layout : 'fit',
				width : 460,
				height : 300,
				modal : true,
				draggable : false,
				closable : false,
				resizable : false,
				border : false,
				animateTarget : document.body,// 动画效果
				items : formPanel,
				buttons : [{
					text : '登录',
					id : "submitBtn",
					formBind : true,
					handler : function() {
						var tabId = Ext.getCmp("tabpanel").getActiveTab()
								.getId();
						if (tabId == "loginTab") {
							login();
						} else if (tabId = "registerTab") {
							register();
						}
					}
				}, {
					text : '重置',
					handler : function() {
						Ext.getCmp("loginForm").getForm().reset();
					}
				}]
			});
	
	//设置焦点
	win.on('show', function() {
				var username = Ext.getCmp('usernameId');
				username.focus(true, 500);
			});
	win.show();
});

// 登录
function login() {
	var form = Ext.getCmp("loginForm").getForm();
	form.url = "user/base!login.action";
	if (form.isValid()) {
		form.submit();
	}
}
// 登录
function register() {
	var form = Ext.getCmp("loginForm").getForm();
	form.url = "user/base!register.action";
	if (form.isValid()) {
		form.submit();
	}
}